<template>
  <el-menu
    :default-active="$route.path"
    :unique-opened="true"
    :collapse-transition="false"
    :collapse="is_collapse"
    router
  >
    <template>
      <div class="logo">
        <img :class="is_collapse ? 'logo-hide' : 'logo-img'" :src="is_collapse ? G_imgPath('login.png') : G_imgPath('logo.png')">
      </div>
    </template>
    <template v-for="route in menus">
      <el-submenu :key="route.id" :index="String(route.id)">
        <template slot="title">
          <i class="iconfont" :class="route.icon"></i>
          <span slot="title">{{ route.menuName }}</span>
        </template>
        <el-menu-item
          v-for="subRoute in route.menuDetailList"
          :key="subRoute.id"
          :index="subRoute.menuUrl"
        >
          <span slot="title">{{ subRoute.menuNameTwo }}</span>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["menu_list", "is_collapse"]),
    menus() {
      let routes = this.add_icon(this.menu_list);
      return routes;
    },
  },
  methods: {
    // 给菜单添加图标
    add_icon(list) {
      let icons = {
        工作台: "icon-gongzuotai_xuanzhong",
        会员管理: "icon-huiyuanguanli",
        企业管理: "icon-icongl",
        店长管理: "icon-jichuguanli",
        订单管理: "icon-065chakandingdan",
        财务管理: "icon-caiwuguanli",
        运营分析: "icon-yunyingfenxi",
      };

      list.forEach((element) => {
        if (icons[element.menuName]) {
          element.icon = icons[element.menuName];
        }
      });

      return list;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu {
  border-right: none;

  .logo {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo-img {
      height: 100%;
    }

    .logo-hide {
      height: 80%;
    }
  }

  .iconfont {
    color: #877bd7;
    margin-right: 10px;
  }

  .el-menu-item.is-active {
    color: #fff;
    background-color: #877bd7;
  }

  .el-menu-item {
    color: #fff;
    background-color: #b4ace6;
  }

  .el-submenu.is-active.is-opened {
    .el-submenu.is-active .el-submenu__title {
      background-color: #f00;
    }
    .iconfont {
      color: #fff;
      margin-right: 10px;
    }
  }
}

::v-deep .el-submenu.is-active .el-submenu__title {
  .el-submenu__icon-arrow.el-icon-arrow-down {
    color: #fff;
  }
  color: #fff;
  background-color: #473ca8;
}
</style>